<template>
  <swiper auto loop :aspect-ratio="1/2" :list="list"></swiper>
</template>
<script>
  import { Swiper } from 'vux'
  export default {
    name: 'focus',
    components: {
      Swiper
    },
    data () {
      return {
        banners: []
      }
    },
    computed: {
      list () {
        let data = []
        this.banners.forEach((item, index) => {
          data[index] = {
            img: this.$apiUrl + '/storage/' + item.body,
            url: item.url,
            title: item.title
          }
        })
        return data
      }
    },
    mounted () {
      this._getData()
    },
    methods: {
      _getData () {
        this.$vux.loading.show()
        this.$http.get('/ads?position=1&page_size=5').then((response) => {
          this.$vux.loading.hide()
          this.banners = response.data.data
        }).catch((error) => {
          this.$vux.loading.hide()
          console.log(error)
        })
      }
    }
  }
</script>
